<template>
  <view class="ditu" :style="{height:height+'px'}">
      <map style="width:100%;height:60%;"
           :latitude="latitude"
           :longitude="longitude"
           :scale="scale"
           :markers="marker">
      </map>
      <view class="bottombox" >
        <view class="bold">{{ address_title }}</view>
        <view class="grey f-size m10">地址：{{ address }}</view>
        <view class="bold">照片信息</view>
        <view>
            <view v-show="!imageurl" class="photoinfo" @click="getPhotos" style="border: 1rpx solid #e5e5e5;">
                <image class="photo"  src="http://121.41.75.32:8002/file/static/ashPhoto.png"/>
            </view>
        
            <view  v-show="imageurl" class="photoinfo">
                <image v-show="imageurl" class="showphoto" :src="imageurl"/>
                <view class="del" @click="del">×</view>
            </view>
        </view>
       
        <button class="m10 btn" @click="submit">提交</button>
      </view>
  </view>
</template>

<script>
import {getScreen, getToken, saveImage} from "../../service/auth";
import  {signIn ,signOut}  from "@/service/api/signin";
export default {
    data() {
        return {
            longitude:'',//经度
            latitude:'',//纬度
            address:'',//详细地址
            address_title:'',//建筑物地址
            scale:16,//缩放
            height:0,
            marker: [{
                id: 0,
                latitude: '', //纬度
                longitude: '', //经度
                alpha: 1, //透明度
                width:20,
                height:30,
            }],
            imageurl:'',
            time:'',
        }
    },
    created(){
        const that = this
        const { height } = getScreen()
        this.height = height
        uni.getLocation({
	    type: 'gcj02',
        geocode:true,
        isHighAccuracy:true,
	    success: function (res) {
            that.longitude=res.longitude
            that.latitude=res.latitude
            // 标记
            that.marker[0].latitude = res.latitude
            that.marker[0].longitude = res.longitude
		    console.log('当前位置的经度：' + res.longitude);
		    console.log('当前位置的纬度：' + res.latitude);
            wx.request({
                url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${res.latitude},${res.longitude}&key=QQXBZ-BUKYS-YEMOS-6DLDL-WMCTO-5ZFNX`,
            success(val) {
                console.log(val,'定位');
                that.address=val.data.result.address
                that.address_title=val.data.result.address_reference.landmark_l2.title
          }
        })
	    }
});
    },
    methods: {
        getPhotos(){
            const date = new Date();
            const year = date.getFullYear();
            const month = date.getMonth()+1;
            const day = date.getDate();
            const hour = date.getHours();
            const minute = date.getMinutes();
            const Seconds = date.getSeconds();
            const _this = this
            uni.chooseImage({
            count: 1, //默认9
            sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
            sourceType: ['camera'], //使用相机
            success: function (res) {
            _this.imageurl=res.tempFilePaths[0]
            saveImage(_this.imageurl).then(res=>{
                _this.imageurl=res
            _this.time=year + "-" + (month < 10 ? "0" + month : month) + "-" + (day < 10 ? "0" + day : day) + " " + (hour < 10 ? "0" + hour : hour) + ":" + (minute < 10 ? "0" + minute : minute)+":"+(Seconds<10?'0'+Seconds : Seconds);
            })
            }
            });
        },
        del(){
            this.imageurl=''
        },
        submit(){
            console.log(this.imageurl,'图片',this.time);
            console.log('提交',);
            const data={
                // id: 0,
                signOutImgUrl: this.imageurl,
                signOutTime: this.time,
                lng:this.longitude,
                lat:this.latitude,
                place:this.address
            }
            signOut(data).then(res=>{
                uni.showToast({
                title:res.msg,
                icon:'none'
                })  
                this.time=''
                this.imageurl=''
            }).catch(err=>{
                uni.showToast({
                title:err.msg,
                icon:'none'
                })
            })
        }
    },
}
</script>

<style lang="scss" scoped>
.ditu{
    position: relative;
    .bottombox{
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 41%;
        border-top-left-radius: 40rpx;
        border-top-right-radius: 40rpx;
        background: white;
        padding: 40rpx;
        .photoinfo{
            height: 240rpx;
            border-radius: 20rpx;
            position: relative;
            margin-top: 10rpx;
            .photo{
                height: 100rpx;
                width: 100rpx;
                // margin: auto;
                margin: 70rpx auto;
                border-radius: 20rpx;
                
            }
            .showphoto{
                border-radius: 20rpx;
                height: 240rpx;
            }
            .del{
                background-color: red;
                color: white;
                width: 30rpx;
                height: 30rpx;
                position: absolute;
                right: 10rpx;
                top: 10rpx;
                text-align: center;
                align-items: center;
                justify-content: center;
                display: flex;
                font-size: 25rpx;
                line-height: 30rpx;
            }
        }
        .f-size{
            font-size: 26rpx;
        }
        .bold{
            font-weight: bold;
        }
        .m10{
            margin: 20rpx 0;
        }
        .btn{
            background-color: #03a9f4;
            color: white;
            border-radius: 50rpx;
        }
        }
}
    
</style>